<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">

			<view class="block_6 flex-col">
				<view class="block_13 flex-row">
					<image class="image_31" :src="dataInfo.image" mode=""></image>

					<view class="group_4 flex-col justify-around">
						<view class="box_6  flex-row ">
							<view class="text_18 line2">{{dataInfo.name}}</view>
							<!-- <div class="block_14 flex-col"></div> -->
						</view>
						<view class="box_7 flex-row" style="flex-wrap: wrap;">
							<view class="text-wrapper_6 flex-col text-wrapper_61" v-for="(item,index) in dataInfo.tags"
								:key="index">
								{{item}}
							</view>

						</view>

					</view>
					<!-- <view class="text-wrapper_8 flex-col">
						
					</view> -->
				</view>
				<view class="block_10 ">
					<view class="section_3 flex-row ">

						<view class="image-text_1 flex-row ">

							<view class="dis" style="align-items: center;">
								<image class="label_1" src="@/static/pagesA/icon_yysj.png" mode="scaleToFill"></image>
								<text class="text-group_1">营业时间:</text>
							</view>

						</view>
						<text class="text_12" @click="call">{{dataInfo.openTime}}-{{dataInfo.closeTime}}</text>
					</view>
					<view class="section_3 flex-row" style="align-items: center;">
						<view class="image-text_1 flex-row " style="align-items: center;">
							<image class="label_1" src="@/static/pagesA/icon_dw.png" mode="scaleToFill"></image>
							<text class="text-group_1">地址:</text>
						</view>
						<view class="flex-row" style=" align-items: center;" @click="openLocation()">
							<view class="text_12">{{dataInfo.address}}</view>
							<image class="label_15" src="@/static/pagesA/icon_dh.png" mode="scaleToFill"></image>
						</view>

					</view>
					<view class="section_3 flex-row ">

						<view class="image-text_1 flex-row ">
							<view class="dis" style="align-items: center;">
								<image class="label_1" src="../../static/com/icon_lxfs.png" mode="scaleToFill"></image>
								<!-- <image class="label_1" src="@/static/pagesA/icon_dt.png" mode=""></image> -->
								<text class="text-group_1">联系方式:</text>
							</view>

						</view>
						<text class="text_12" @click="call">{{dataInfo.phone}}</text>
					</view>
				</view>

				<view class="tt-tit">团购</view>

				<view class="block_13 flex-row" @click="goPage(item)" v-for="(item,index) in dataInfo.productList"
					:key="index">
					<image class="image_3" :src="item.image" mode=""></image>

					<view class="group_4 flex-col justify-between">
						<view class="box_6  flex-row ">
							<view class="text_18 line2">{{item.name}}</view>
							<!-- <div class="block_14 flex-col"></div> -->
						</view>

						<view class="text-wrapper_7 flex-row justify-between">
							<view><text class="text_21 bc">¥</text>
								<text class="text_22 bc">{{item.price}}</text>
							</view>
							<view class="text-wrapper_8 bb flex-col">
								立即抢购
							</view>
						</view>
					</view>
					<!-- <view class="text-wrapper_8 flex-col">
						
					</view> -->
				</view>

			</view>
			<view class="block_20 flex-col">
				<text class="text_36">餐厅详情</text>
				<jyf-parser :html="dataInfo.description" ref="article" :tag-style="tagStyle"></jyf-parser>

			</view>
		</view>
		<home></home>
	</view>
</template>
<script>
	import home from '@/components/home/index.vue'
	import parser from "@/components/jyf-parser/jyf-parser";
	import {

		getApplyCateringInfo
	} from '@/api/togeterRich/index.js'
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		components: {
			home,
			MxDatePicker,
			"jyf-parser": parser
		},
		data() {
			return {
				id: '',
				dataInfo: {},
				showPicker: false,

				range: ['2023/01/01', '2023/01/06'],

				type: 'rangetime',
				value: '',
				constants: {

				},
			};
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods: {
			init() {
				getApplyCateringInfo(this.id).then(res => {
					console.log(res, 'kjkk')
					this.dataInfo = res.data
				})
			},
			goPage(item) {
				uni.navigateTo({
					url: `/pagesA/BeautifulEconomy/mealInfo?id=${item.id}&&sid=${this.id}`

				})
			},
			onShowDatePicker(type) { //显示
				this.type = type;
				this.showPicker = true;
				this.value = this[type];
			},
			openLocation() {

				uni.openLocation({
					latitude: Number(this.dataInfo.latitude), // 目标纬度
					longitude: Number(this.dataInfo.longitude), // 目标经度
					name: this.dataInfo.address,
					address: this.dataInfo.address,
					success: function() {
						console.log('打开地图导航成功');
					},
					fail: function(err) {
						console.log('打开地图导航失败', err);
					}
				});
			},
			ed(e) { //选择
				this.showPicker = false;
				if (e) {
					this[this.type] = e.value;
					//选择的值
					console.log('value => ' + e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	.bc{
			color: $maincolor !important;
		}
		.bgb{
			border: 2rpx solid $maincolor !important;
		}
		.bb{
			background: $maincolor;
		}
	.tt-tit {
		padding: 30rpx;
		font-size: 34rpx;
		color: #000;
		margin-top: 20rpx;
		background: #fff;
	}

	.text-wrapper_61 {
		color: $maincolor;
		border: 1rpx solid $maincolor;
	}

	.swiper {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	@import '@/pagesA/BeautifulEconomy/com/homstayInfo.css';

	@import '@/com/css/common.css';
</style>